<template>
    <div>
        <div style="margin: 20px 0;">
            <el-button type="primary" @click="handleAdd">创建角色</el-button>
            <el-button type="success" :disabled="currentRow == null ? true : false"
                @click="roleAuthVisible = true">设置角色权限</el-button>

        </div>
        <el-table ref="singleTableRef" :data="roleList" highlight-current-row @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column type="index" width="80" label="序号">
            </el-table-column>
            <el-table-column property="name" label="角色名称">
            </el-table-column>
            <el-table-column property="create_time" label="创建时间" :formatter="resetDate">
            </el-table-column>
            <el-table-column property="auth_time" label="授权时间" :formatter="resetDate">
            </el-table-column>
            <el-table-column property="auth_name" label="授权人">
            </el-table-column>
        </el-table>

        <el-dialog v-model="roleFormVisible" title="添加角色" width="500px">
            <el-form :model="role" ref="roleFormRef" label-width="100px" label-position="right" style="width: 400px;"
                :rules="rules">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="addRole(roleFormRef)">确定</el-button>
                    <el-button type="primary" @click="roleFormVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 设置角色权限弹窗 -->
        <el-dialog v-model="roleAuthVisible" title="设置角色权限" width="500px">
            <Auth :role="currentRow" v-if="roleAuthVisible" ref="authRef"></Auth>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="updateData">确定</el-button>
                    <el-button @click="roleAuthVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
//引入日期格式化日期
import { formateDate } from "@/utils/dateUtils";
import Auth from "./components/Auth.vue";
//引入用户小仓库
import useUserStore from "@/store/modules/user";
//引入角色小仓库
import useRoleStore from "@/store/modules/role";
import type { roleInfoData } from "@/api/role/type";


const resetDate = (_row: any, _colum: any, cellValue: number, _index: number) => {
    return formateDate(cellValue)
}

import type { FormInstance, FormRules } from "element-plus";
let useStore = useRoleStore()
let userStore = useUserStore()

//角色列表
let roleList = ref<roleInfoData[] | undefined>([])
//当前选中行
const currentRow = ref<roleInfoData | null>(null)
//点击进行回调
// const roleList=ref([])
//当选中行发生变化时触发的函数

const handleCurrentChange = (val: any) => {
    currentRow.value = val
}

// 添加角色
const handleAdd = () => {
    roleFormVisible.value = true
    nextTick(() => {
        roleFormRef.value?.resetFields()
    })
}


const roleFormVisible = ref(false)

const role = reactive({
    name: ''
})

const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
})



const roleFormRef = ref()
//Auth子组件ref对象，可以从此对象中获取子组件中数据的方法
const authRef = ref()

const roleStore=useRoleStore()

//添加角色
const addRole = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            //@ts-ignore
            useStore.useAddRole(role).then(response => {
                //关闭添加角色弹窗
                roleFormVisible.value = false
                //舒心数据列表
                getRoleList()
            })
        } else {
        }
    })
}

//添加角色列表
const getRoleList = () => {
    useStore.roleList().then(() => {
        //@ts-ignore
        roleList.value = useStore.roles
    })
}

// 设置角色权限弹窗是否展示
const roleAuthVisible = ref(false)

//更新角色
const updateData = () => {
    const newRole = authRef.value.getMenus()
    //@ts-ignore
    currentRow.value.menus = newRole.menus
    //@ts-ignore
    currentRow.value.name = newRole.name
    //@ts-ignore
    currentRow.value.auth_name = userStore.user?.username
    //@ts-ignore
    roleStore.updateRole(currentRow.value).then(() => {
        roleAuthVisible.value = false
        getRoleList()
    })
}
onMounted(() => {
    getRoleList()
})
</script>

<style scoped></style>